<template>
	<view class="g-row g-heighte1">
		<image class="order-bg" mode="widthFix" :src="imageUrl +'pice7.png'"></image>
		<u-navbar leftText="联系客服" @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
			:bgColor="bgColor">
		</u-navbar>
		<view class="g-flexe1">
			<view class="wp">
				<view class="m-licenseplatebinding m-textinpute1">
					<view class="txt">
						<view class="tit">
							HI，<br />
							请选择您要咨询的订单
						</view>
					</view>
					<view class="pic">
						<image class="img" mode="widthFix" :src="imageUrl +'pice3.png'"></image>
					</view>
				</view>

				<view class="ul-order m-textinpute2">
					<view class="li">
						<view class="con">
							<view class="g-topcontactcustomere1">
								<view class="l-con">
									<text class="date">2025-09-19 10:12</text>
									<text class="span1">付费离开</text>
								</view>
								<view class="r-con">
									<view>全部订单</view>
									<!-- <view>去认证</view> -->
									<image :src="imageUrl +'next.png'" mode="widthFix"></image>
								</view>
							</view>

							<view class="inner">
								<view class="top">
									<view class="left">
										<view class="tit">鄂E · E12345</view>
										<view class="ps">
											<image class="bg" mode="widthFix" :src="imageUrl +'list/bg2.png'"></image>
											<view class="span">已认证</view>
										</view>
									</view>
								</view>
								<view class="desc">
									<view class="p">
										<image class="icon" mode="widthFix" :src="imageUrl +'list/clock.svg'"></image>
										2025-09-03 15:33:33 ~ 2025-09-03 17:33:33
									</view>
									<view class="p">
										<image class="icon" mode="widthFix" :src="imageUrl +'list/map-point.svg'">
										</image>
										停车场详细地址停车场详细地址停车场详细地址停车场详细地址
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="g-flexe2">
			<view class="wp">
				<view class="g-scroll">

					<view class="m-scrollcom">
						<view class="m-textinpute3">
							<image class="bg2" mode="widthFix" :src="imageUrl +'pice8.png'"></image>
							<view class="inner">
								<view class="tit">
									猜你想问
								</view>
								<view class="ul-textinpe1">
									<view class="li">
										<navigator url="" hover-class="none" class="con">
											<view class="tit2">
												1.如何注册/登录账号
											</view>
											<image class="icon" mode="widthFix" :src="imageUrl +'icone7.png'">
											</image>
										</navigator>
									</view>
									<view class="li">
										<navigator url="" hover-class="none" class="con">
											<view class="tit2">
												2.如何绑定我的车牌号？一个账号可以绑定几辆车？
											</view>
											<image class="icon" mode="widthFix" :src="imageUrl +'icone7.png'">
											</image>
										</navigator>
									</view>
									<view class="li">
										<navigator url="" hover-class="none" class="con">
											<view class="tit2">
												3.如果解绑或更换已绑定的车牌
											</view>
											<image class="icon" mode="widthFix" :src="imageUrl +'icone7.png'">
											</image>
										</navigator>
									</view>
									<view class="li">
										<navigator url="" hover-class="none" class="con">
											<view class="tit2">
												4.忘记密码怎么办？如何修改手机号？
											</view>
											<image class="icon" mode="widthFix" :src="imageUrl +'icone7.png'">
											</image>
										</navigator>
									</view>
									<view class="li">
										<navigator url="" hover-class="none" class="con">
											<view class="tit2">
												5.如何预约车位？预约后可以保留多久？
											</view>
											<image class="icon" mode="widthFix" :src="imageUrl +'icone7.png'">
											</image>
										</navigator>
									</view>
									<view class="li">
										<navigator url="" hover-class="none" class="con">
											<view class="tit2">
												6.停车费是如何计算的？计算规划在哪里查看？
											</view>
											<image class="icon" mode="widthFix" :src="imageUrl +'icone7.png'">
											</image>
										</navigator>
									</view>
									<view class="li">
										<navigator url="" hover-class="none" class="con">
											<view class="tit2">
												7.为什么我已经离场了，还会产生新的停车费？ </view>
											<image class="icon" mode="widthFix" :src="imageUrl +'icone7.png'">
											</image>
										</navigator>
									</view>
								</view>
							</view>
						</view>
						<view class="m-querye1 " :class="{ 'm-queryvoice': isContentActive }">
							<scroll-view scroll-y style="height: 228rpx;">
								<view class="box">

									<view class="item r-con itemtext">
										<view class="span1">
											我想问的问题？
										</view>
									</view>
									<view class="item r-con itemvoice">
										<view class="span1">
											<text>12＂ </text>
											<image class="icon1" mode="widthFix" :src="imageUrl +'icone15.png'"></image>
										</view>
									</view>
									<view class="item l-con">
										<view class="span1">
											问题的回答
										</view>
									</view>
								</view>
							</scroll-view>

						</view>
					</view>

				</view>


			</view>
			<view class="m-bote1">
				<view class="box1">
					<button class="btn " @click="readMore4('showMre4')">
						<image v-if="showMre4" class="icon" mode="widthFix" :src="imageUrl +'icone12.png'"></image>
						<image v-else class="icon" mode="widthFix" :src="imageUrl +'icone14.png'"></image>
					</button>
					<input type="text" class="inp" placeholder="请输入您想咨询的问题"
						placeholder-style="rgba(28, 39, 76, 0.60)" />
					<button class="btn">
						<image class="icon" mode="widthFix" :src="imageUrl +'icone13.png'"></image>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				// 头部背景色
				bgColor: 'transparent',
				plateNumber: ['', '', '', '', '', '', '', ''],
				//
				value1: true,
				value2: false,
				value3: true,
				value4: true,
				value5: true,
				value6: true,
				// 22
				showMre4: false,
				isContentActive: false,
			}
		},
		methods: {
			// 头部滚动
			onPageScroll(res) {
				if (res.scrollTop >= 60) {
					this.bgColor = '#ffffff'
				} else {
					this.bgColor = 'transparent'
				}
			},
			plateChange(val) {
				this.plateNumber = val;
			},
			// 22
			readMore4(type) {
				// 切换按钮图标状态
				this.showMre4 = !this.showMre4;
				// 切换内容区域类名状态
				this.isContentActive = !this.isContentActive;

				// 若需根据 type 做其他逻辑（如加载数据），可在此扩展
				if (type === 'showMre4') {
					console.log('触发 showMre4 相关逻辑');
				}
			}
		}
	}
</script>
<style lang="scss">
	.g-row,
	page {
		background-color: #F4FAF7;
	}

	.g-row {
		padding-bottom: 180rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		/* 兼容iOS 11.0-11.2 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		/* 兼容iOS 11.2+ */
		padding-bottom: 180rpx;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.m-scrollcom {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.m-querye1,
	.g-flexe2 {
		flex: 1;
	}

	.m-querye1.m-queryvoice .itemtext,
	.itemvoice {
		display: none;
	}

	.m-querye1.m-queryvoice .itemvoice {
		display: block;
	}

	.ul-order {
		margin-bottom: 20rpx;
	}

	.ul-order .con {
		padding: 20rpx 20rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: block;
	}



	.ul-order .top .left {
		display: flex;
		align-items: center;
	}

	.ul-order .top .tit {
		color: #1C274C;
		font-size: 36rpx;
		font-weight: 600;
	}

	.ul-order .top .ps {
		position: relative;
		margin-left: 10rpx;
	}

	.ul-order .top .ps .bg {
		display: block;
		width: 110rpx;
		height: 32rpx;
	}

	.ul-order .top .ps .span {
		display: inline-block;
		position: absolute;
		right: 18rpx;
		color: #fff;
		font-size: 20rpx;
		font-weight: 500;
		top: 50%;
		transform: translateY(-50%);
	}

	.ul-order .inner {
		border-radius: 8rpx;
		background: linear-gradient(90deg, #F4FAF7 0%, rgba(244, 250, 247, 0.00) 100%);
		padding: 15rpx 20rpx 20rpx;

	}


	.ul-order .inner .desc .p {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: rgba(28, 39, 76, 0.6);
		margin-top: 10rpx;
	}

	.ul-order .inner .desc .p .icon {
		display: block;
		width: 24rpx;
		height: 24rpx;
		margin-right: 6rpx;
	}



	.g-topcontactcustomere1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.g-topcontactcustomere1 .r-con {
		width: 160rpx;
		height: 48rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(to right, #00BBFF, #5ADA7A);
	}

	.g-topcontactcustomere1 .r-con view {
		font-size: 24rpx;
		color: #FFFFFF;
		margin-right: 10rpx;
	}

	.g-topcontactcustomere1 .r-con image {
		width: 14rpx;
		height: 14rpx;
	}

	.g-topcontactcustomere1 .l-con text {
		display: inline-block;
		vertical-align: middle;
	}

	.g-topcontactcustomere1 .l-con .date {
		color: rgba(28, 39, 76, 0.60);
		font-family: Roboto;
		font-size: 24rpx;
		line-height: 32rpx;
		/* 133.333% */
	}

	.g-topcontactcustomere1 .l-con .span1 {
		color: #24A7CE;
		font-family: "PingFang SC";
		font-size: 24rpx;
		line-height: 32rpx;
		/* 133.333% */
		margin-left: 8rpx;
	}
</style>